<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content" role="application">
		<div id="tshirt-view" class="demo-section">
			<h2>Customize your Kendo T-shirt</h2>
			<img id="tshirt" src="../../content/web/combobox/tShirt.png" />
            <div id="options">
			<h3>T-shirt Fabric</h3>
            <input id="fabric" placeholder="Select fabric..." />

            <h3>T-shirt Size</h3>
            <select id="size" placeholder="Select size...">
				<option>X-Small</option>
				<option>Small</option>
				<option>Medium</option>
				<option>Large</option>
				<option>X-Large</option>
				<option>2X-Large</option>
			</select>

			<button class="k-button" id="get">Customize</button>
			</div>
        </div>
		<style scoped>
			.demo-section {
				width: 460px;
				height: 340px;
				padding: 30px;
			}
			.demo-section h2 {
				text-transform: uppercase;
				font-size: 1.2em;
				margin-bottom: 30px;
			}
			#tshirt {
				float: left;
				margin: 0 40px 30px 0;
			}
			#options {
				padding: 20px 0 30px 30px;
			}
			#options h3 {
				font-size: 1em;
				font-weight: bold;
				margin: 25px 0 8px 0;
			}
			#get {
				margin-top: 25px;
			}

            .k-readonly
            {
                color: gray;
            }
		</style>

            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    $("#fabric").kendoComboBox({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton/Polyester", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
                        filter: "contains",
                        suggest: true,
                        index: 3
                    });

                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();

                    var fabric = $("#fabric").data("kendoComboBox");
					var select = $("#size").data("kendoComboBox");


					$("#get").click(function() {
					    alert('Thank you! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + select.value());
                    });
                });
            </script>
        </div>

</body>
</html>
